{{ define "css"}}
    <link href="https://cdn.bootcss.com/limonte-sweetalert2/7.33.1/sweetalert2.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/video.js/7.5.4/video-js.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/prism/9000.0.1/themes/prism.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/prism/9000.0.1/plugins/show-language/prism-show-language.min.css" rel="stylesheet">
    <style type="text/css">
        body {background: #e5e5e5;}
        .media-content .content p {
            font-size: 14px;
            line-height: 0.8rem;
        }
    </style>
{{ end }}

{{define "content"}}
    <div class="container" style="padding: 1.5rem 0rem;">
        <div class="columns">
            <div class="column is-three-quarters is-info">
                <div class="card">
                    {{if eq .user_id 0}}
                        <div class="has-text-centered">
                            <div style="text-align: center; background: url({{.video.CoverUrl}}) 50% 70% no-repeat #080808;padding: 22% 0;">
                                <h3 style="color: #fff;">&nbsp;&nbsp;&nbsp;&nbsp;观看视频需要登录</h3>
                                <ul class="">
                                    <li><a href="/register" class="button is-link">马上加入 1024课堂</a></li>
                                    <li><a href="/login">有账号?马上登录</a></li>
                                </ul>
                            </div>
                        </div>
                    {{else}}
                        {{if eq .video.IsFree 1}}
                            <video id="video-player" class="video-js vjs-fluid vjs-big-play-centered placeholder"
                                   poster="{{ .video.CoverUrl }}" data-setup='{}'>
                                <source src="{{ .video.Mp4URL }}" type='video/mp4' data-default="true">
                                <p class="vjs-no-js">
                                    To view this video please enable JavaScript, and consider upgrading to a web browser that
                                    <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                                </p>
                            </video>
                        {{else}}
                            {{if .user.IsVip}}
                                <video id="video-player" class="video-js vjs-fluid vjs-big-play-centered placeholder"
                                       poster="{{ .video.CoverUrl }}" data-setup='{}'>
                                    <source src="{{ .video.Mp4URL }}" type='video/mp4' data-default="true">
                                    <p class="vjs-no-js">
                                        To view this video please enable JavaScript, and consider upgrading to a web browser that
                                        <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                                    </p>
                                </video>
                            {{else}}
                                <div class="ui centered text">
                                    <div style="text-align: center; background: url({{.video.CoverImage}}) 50% 70% no-repeat #080808;padding: 22% 0;">
                                        <h3 style="color: #fff;">&nbsp;&nbsp;&nbsp;&nbsp;订阅后可以观看全部视频</h3>
                                        <ul class="">
                                            <li><a href="/vip" class="button is-link">马上加入 订阅</a></li>
                                        </ul>
                                    </div>
                                </div>
                            {{end}}
                        {{end}}
                    {{end}}

                    <div class="card-content">
                        <div class="media">
                            <div class="media-content">
                                <nav class="breadcrumb has-arrow-separator" aria-label="breadcrumbs">
                                    <ul>
                                        <li><a href="/courses/{{.course.Slug}}">{{.course.Name}}</a></li>
                                        <li class="is-active"><a href="#">{{.video.Name}}</a></li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                        <div class="content">
                            {{.video.Description}}
                            <br>
                            视频发布于：<time datetime="2016-1-1">{{.video.PublishedAtStr}}</time>
                        </div>
                    </div>
                </div>

                {{if gt .cmtCount 0}}
                    <div id="comments" class="box" style="margin-top: 1rem;">
                        {{ range $index, $value := .comments}}
                            <article class="media">
                                <figure class="media-left">
                                    <p class="image is-48x48">
                                        <img class="is-rounded" src="{{.UserInfo.Avatar}}">
                                    </p>
                                </figure>
                                <div class="media-content">
                                    <div class="content">
                                        <p>
                                            <strong>{{.UserInfo.Username}}</strong> <small>{{.CreatedAtStr}}</small>
                                            <br>
                                            {{.ContentHtml}}
                                        </p>
                                    </div>
                                    <nav class="level is-mobile">
                                        <div class="level-left">
                                            <a class="level-item" href="javascript:void(0)" @click="likeComment($event, {{ .Id }})">
                                                <span class="icon is-small">
                                                    <i class="far fa-thumbs-up"></i>{{.LikeCount}}
                                                </span>
                                            </a>
                                            <a class="level-item" href="javascript:void(0)" @click="replyUser($event, '{{.UserInfo.Username}}')">
                                                <span class="icon is-small">
                                                    <i class="fas fa-reply"></i>
                                                </span>
                                            </a>
                                        </div>
                                    </nav>
                                </div>
                            </article>
                        {{end}}
                    </div>
                {{end}}

                <!-- 评论框-->
                <div id="comment_box" class="box" style="margin-top: 1rem;">
                    <article class="media">
                        <figure class="media-left">
                            <p class="image is-48x48">
                                <img class="is-rounded" src="{{.user.Avatar}}">
                            </p>
                        </figure>
                        <div class="media-content">
                            <div class="field">
                                <p class="control">
                                    <textarea class="textarea" id="reply_content" name="content" v-model="content" placeholder="支持Markdown语法"></textarea>
                                </p>
                            </div>
                            <nav class="level">
                                <div class="level-right">
                                    <div class="level-item">
                                        <button class="button is-info" @click="addComment">提交评论</button>
                                    </div>
                                </div>
                            </nav>
                        </div>
                    </article>
                </div>

            </div>
            <aside class="column menu">
                <p class="menu-label">
                    最新课程
                </p>
                <ul class="menu-list" style="font-size: 14px;">
                    {{range .recentCourses}}
                        <li>
                            <a class="list-item" href="/courses/{{.Slug}}">{{.Name}}</a>
                        </li>
                    {{end}}
                </ul>
                <br />
            </aside>
        </div>


    </div>
{{end}}
{{ define "js" }}
    <script src="https://cdn.bootcss.com/video.js/7.5.4/video.min.js"></script>
    {{if ne .user_id 0}}
    <script src="https://cdn.bootcss.com/video.js/7.5.4/lang/zh-CN.js"></script>
    {{end}}
    <script src="https://cdn.bootcss.com/prism/9000.0.1/prism.min.js"></script>
    <script src="https://cdn.bootcss.com/prism/9000.0.1/components/prism-go.min.js"></script>
    <script src="https://cdn.bootcss.com/prism/9000.0.1/components/prism-php.min.js"></script>
    <script src="https://cdn.bootcss.com/prism/9000.0.1/components/prism-javascript.min.js"></script>
    <script src="https://cdn.bootcss.com/prism/9000.0.1/components/prism-markdown.min.js"></script>
    <script src="https://cdn.bootcss.com/prism/9000.0.1/plugins/show-language/prism-show-language.min.js"></script>
    <script src="https://cdn.bootcss.com/prism/9000.0.1/components/prism-markup.min.js"></script>
    <script src="https://cdn.bootcss.com/marked/0.6.2/marked.min.js"></script>
    <script src="https://cdn.bootcss.com/limonte-sweetalert2/7.33.1/sweetalert2.all.min.js"></script>
    <script type="text/javascript">
        {{if or .user.IsVip (eq .video.IsFree 1) }}
        var video = videojs("video-player", {
            "fluid":!0,
            "playbackRates":[0.5,.75,1,1.25,1.5,1.75,2],
            "controls": true,
            "autoplay": false,
            "preload": "auto"
        }).ready(function () {

        });
        {{end}}

        var app = new Vue({
            el: '#comments',
            data: {
                content: '',
            },
            delimiters:['${', '}'],
            methods: {
                likeComment: function (e, commentId) {
                    var bodyFormData = new FormData();
                    bodyFormData.set('comment_id', commentId);
                    let config = {
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        }
                    };
                    this.$http.post("/comments/" + commentId + "/like", bodyFormData, config).then((response) => {
                        if (response.data.code === 0) {
                            // 更新数量
                            swal("点赞成功！", "","success");
                            return true;
                        } else {
                            return false;
                        }
                    }).catch( error => {
                        console.log(error);
                    });
                },
                replyUser: function (e, username) {
                    var replyContent = $('#reply_content');
                    var oldContent = replyContent.val();
                    var lastAtUser = "@" + username + " ";
                    var newContent = '';
                    if (oldContent.length > 0) {
                        if (oldContent !== lastAtUser) {
                            newContent = oldContent + "\n" + lastAtUser;
                        }
                    } else {
                        newContent = lastAtUser;
                    }

                    replyContent.focus();
                    replyContent.val(newContent);
                }
            }
        });

        var comment_box = new Vue({
            el: '#comment_box',
            data: {
                content: '',
            },
            delimiters:['${', '}'],
            methods: {
                addComment: function (e) {
                    e.preventDefault();
                    if (this.content === '') {
                        swal("请正确填写评论！", "","warning");
                        return false;
                    }
                    var bodyFormData = new FormData();
                    bodyFormData.set("type", 1);
                    bodyFormData.set("related_id", {{.video.Id}});
                    bodyFormData.set("origin_content", this.content);
                    bodyFormData.set("content", marked(this.content));
                    let config = {
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        }
                    };
                    this.$http.post("/comments", bodyFormData, config).then((response) => {
                        console.log(response);
                        if (response.data.code === 0) {
                            // http://mishengqiang.com/sweetalert/
                            swal("更新成功！", "","success");
                            return true;
                        } else {
                            swal("修改失败！", "","error");
                            return false;
                        }
                    }).catch( error => {
                        console.log(error);
                    });
                }
            }
        });
    </script>
{{end}}

